import React, { useRef, useState, useEffect} from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'
import './EventsDetatl.css'
export default function EventsDetail() {
    const navigate = useNavigate()
    const location = useLocation()
    const [thisdata, setThisdata] = useState(location.state)
    console.log(thisdata)
  return (
    <div className='EventsDetail' style={{backgroundImage:`url(${thisdata.img})`}}>
        <div className='EventsDetail-top'>
        <div className='store_top_icon' onClick={() => {
                    navigate(-1)
                }
                }></div>
        </div>
        <div className='EventsDetail-content'>
            <div className='EventsDetail-content-title'>
                <p><b>{thisdata.name}</b></p>
                <div className='EventsDetail-content-title-type'>
                 <span>{thisdata.type}</span>
                </div>
                <div>
                    <p>活动时间：{thisdata.time}</p>
                </div>
                <div className='EventsDetail-content-title-address'><span>活动地点：{thisdata.address}</span>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u241.svg'></img>
                </div>
            </div>
            <div className='EventsDetail-content-title2'>
                <p className='EventsDetail-content-title-b'><b>活动详情</b></p>
                {
                    thisdata.detail.map((item, index) => {
                        return <p className='EventsDetail-content-title-address' key={index}>{item}</p>
                    })
                }
            </div>
        </div>
        <div className='Events_chard'>
                <div className='Events_chard_item' onClick={()=>{
                            navigate('/shop',{
                                state:{
                                    shopid:thisdata.shopid
                                }
                            })
                        }}>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A4%BE%E5%8C%BA/u482.svg'></img>
                    <p>收藏</p>
                </div>
                <div className='Events_chard_item' onClick={()=>{
                    gocustomer()
                }}>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E7%A4%BE%E5%8C%BA/u479.svg'></img>
                    <p>点赞</p>
                </div>
                <div className='Events_chard_item' onClick={()=>{
                    navigate('/ShoppingCart')
                }}>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%B4%BB%E5%8A%A8%E8%AF%A6%E6%83%85/u1136.svg'></img>
                    <p>分享</p>
                </div>
                <button className='Events_chard_butb' onClick={()=>{
    {}
                    navigate('/addEvent')
                }}>
                    立即预约
                </button>
            </div>
    </div>
  )
}
